<template>
    <div>
      <div id="echart" style="width:100%;height:500px;"></div>
    </div>
  </template>
  
  <script>
  import * as echarts from 'echarts';
  
  export default {
    mounted() {
      setTimeout(() => {
        const myChart = echarts.init(document.getElementById('echart'));
  
        const option = {
          legend: {},
          tooltip: {
            trigger: 'axis',
            showContent: false
          },
          dataset: {
            source: [
              ['product', '2018', '2019', '2020', '2021', '2022', '2023'],
              ['计算机类', 293560, 324599, 340034,360034, 380600, 390000],
              ['电子信息类', 150900, 175600, 181800, 188090, 201300, 215000]
            ]
          },
          xAxis: { type: 'category' },
          yAxis: { gridIndex: 0 },
          grid: { top: '55%' },
          series: [
            { type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: { focus: 'series' } },
            { type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: { focus: 'series' } },
            {
              type: 'pie',
              id: 'pie',
              radius: '40%',
              center: ['50%', '25%'],
              emphasis: { focus: 'self' },
              label: { formatter: '{b}: {@2018} ({d}%)' },
              encode: { itemName: 'product', value: '2018', tooltip: '2018' }
            }
          ]
        };
  
        myChart.on('updateAxisPointer', event => {
          const xAxisInfo = event.axesInfo[0];
          if (xAxisInfo) {
            const dimension = xAxisInfo.value + 1;
            myChart.setOption({
              series: {
                id: 'pie',
                label: { formatter: '{b}: {@[' + dimension + ']} ({d}%)' },
                encode: { value: dimension, tooltip: dimension }
              }
            });
          }
        });
  
        myChart.setOption(option);
      });
    }
  };
  </script>
  
  <style scoped>
  /* Add your styles here */
  </style>
  